<template>
  <div class="main">
    <div class="page">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
    <ul class="tab">
      <li :class="{active:nowTab===`/main`}" @click="()=>redirectTo('/main')">
        <img
          :src="nowTab===`/main`?`https://uniapp.b2b2c.niuteam.cn//upload/0/images/20200313/20200313102102-77687000884.png`
          :`https://uniapp.b2b2c.niuteam.cn//upload/0/images/20200313/20200313102059-77687275078.png`"
          alt
          class="tab-icon"
        />
        <span class="tab-title">首页</span>
      </li>
      <li :class="{active:nowTab===`/cate`}" @click="()=>redirectTo('/cate')">
        <img
          :src="nowTab===`/cate`?`https://uniapp.b2b2c.niuteam.cn//upload/0/images/20200313/20200313102056-77687573234.png`
          : `https://uniapp.b2b2c.niuteam.cn//upload/0/images/20200313/20200313102054-77687810662.png`"
          alt
          class="tab-icon"
        />
        <span class="tab-title">分类</span>
      </li>

      <li :class="{active:nowTab===`/street`}" @click="()=>redirectTo('/street')">
        <img
          :src="nowTab===`/street`?require(`./shop.png`):require(`./shop_light.png`)"
          alt
          class="tab-icon"
        />
        <span class="tab-title">店铺街</span>
      </li>

      <!-- <li
        :class="{active:nowTab===`/street`}"
        @click="()=>redirectTo('/street')"
        style="position: relative"
      >
        <div class="center-icon">
          <img
            src="https://uniapp.b2b2c.niuteam.cn//upload/common/images/20200403/20200403042451105935968076.png"
            alt
            style="width: 2rem"
          />
        </div>
        <span></span>
        <span class="tab-title">店铺街</span>
      </li>-->

      <li :class="{active:nowTab===`/cart`}" @click="()=>redirectTo('/cart')">
        <img
          :src="nowTab===`/cart`?`https://uniapp.b2b2c.niuteam.cn//upload/common/images/20200320/20200320022755-15725626888.png`:
           `https://uniapp.b2b2c.niuteam.cn//upload/common/images/20200320/20200320022754-15725783078.png`"
          alt
          class="tab-icon"
        />
        <span class="tab-title">购物车</span>
      </li>
      <li :class="{active:nowTab===`/mine`}" @click="()=>redirectTo('/mine')">
        <img
          :src="nowTab===`/mine`?`https://uniapp.b2b2c.niuteam.cn//upload/common/images/20200320/20200320022751-15726094478.png`
          : `https://uniapp.b2b2c.niuteam.cn//upload/common/images/20200320/20200320022749-15726302680.png`"
          alt
          class="tab-icon"
        />
        <span class="tab-title">个人中心</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      nowTab: "main"
    };
  },
  methods: {
    redirectTo(url) {
      if (url !== this.nowTab) {
        this.$router.push(url);
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.nowTab = vm.$route.path;
    });
  },
  beforeRouteUpdate(to, from, next) {
    this.nowTab = to.path;
    next();
  }
};
</script>
<style lang="less" scoped>
.main {
  height: 100%;
}

.page {
  box-sizing: border-box;
  background-color: #f4f4f4;
  height: calc(100% - 2.65rem);
  overflow-y: scroll;
}

.tab {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #f1f1f1;
  display: flex;
  bottom: 0;
  font-size: 0.6rem;

  .active {
    color: rgb(250, 0, 54);
  }

  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.2rem;
    box-sizing: border-box;
    justify-content: space-between;

    .tab-icon {
      width: 1.4rem;
      height: 1.4rem;
    }

    .center-icon {
      position: absolute;
      padding: 0.25rem;
      background-color: white;
      border-radius: 50%;
      top: -1.25rem;
      border-top: 1px solid #f1f1f1;

      img {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        display: block;
      }
    }
  }
}
</style>
